<template>
    <el-card>
        <template #header>
            <div class='card-header'>
                <span>创建检测报告类型</span>
            </div>
        </template>

        <el-steps
            :active='active'
            finish-status='success'
            process-status='process'
            align-center
            style='margin-top: 20px;margin-bottom: 20px;'
        >
            <el-step title='检测报告类型'/>
            <el-step title='成功'/>
        </el-steps>
        <el-row>
            <el-col :span='20' :offset='2'>
                <el-form
                    v-if='active == 0'
                    ref='formRef'
                    :model='form'
                    :rules='rules'
                    label-width='120px'
                >
                    <el-form-item label='报告名称' prop='reportName'>
                        <el-input v-model='form.reportName' placeholder='报告名称,如: 水泥硬度报告'/>
                    </el-form-item>

                    <el-form-item label='报告代码' prop='code'>
                        <el-input v-model='form.code' placeholder='报告代码,如: gangjin'/>
                    </el-form-item>

                    <el-form-item label='检测周期' prop='testCircle'>
                        <el-input v-model='form.testCircle' placeholder='检测周期,如: 3天'/>
                    </el-form-item>

                    <el-form-item label='委托单数据' prop='form'>
                        <el-upload
                            ref='upload'
                            class='upload-demo'
                            action='#'
                            :show-file-list='false'
                            :on-change='upLoadForm'
                            :auto-upload='false'
                        >
                            <el-button type='primary' v-if='form.form == ""'>点击上传</el-button>
                            <el-button type='primary' v-else>已选择-点击重新选择</el-button>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label='原始数据' prop='yssj'>
                        <el-upload
                            ref='upload'
                            class='upload-demo'
                            action='#'
                            :show-file-list='false'
                            :on-change='upLoadYssj'
                            :auto-upload='false'
                        >
                            <el-button type='primary' v-if='form.yssj == ""'>点击上传</el-button>
                            <el-button type='primary' v-else>已选择-点击重新选择</el-button>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label='报告单' prop='checkForm'>
                        <el-upload
                            ref='upload'
                            class='upload-demo'
                            action='#'
                            :show-file-list='false'
                            :on-change='upLoadCheckForm'
                            :auto-upload='false'
                        >
                            <el-button type='primary' v-if='form.checkForm == ""'>点击上传</el-button>
                            <el-button type='primary' v-else>已选择-点击重新选择</el-button>
                        </el-upload>
                    </el-form-item>

                </el-form>

                <el-button v-if='active == 0' type='primary' @click='next'>提交</el-button>

                <el-result
                    v-if='active==1'
                    icon='success'
                    title='添加成功'
                    sub-title='添加成功'
                >
                    <template #extra>
                        <el-button type='primary' @click='active = 0'>返回</el-button>
                    </template>
                </el-result>

            </el-col>
        </el-row>

    </el-card>


</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'
// 网络请求
import { addCheckType as apiAddCheckType } from '/@/api/CheckType'
import { validate } from '/@/utils/formExtend'
import { ElNotification } from 'element-plus'
import router from '/@/router'
import { ICheckTypeTableForm } from '/@/type/views/CheckType/CheckTypeAdd'
import { uploadFile } from '/@/api/Upload'


type FormInstance = InstanceType<typeof ElForm>


const addCheckType = async(form: ICheckTypeTableForm) => {
    const res = await apiAddCheckType(form)
    ElNotification({
        title: '成功',
        message: res.data.message,
        type: 'success'
    })
    await router.push('/CheckType/CheckTypeList')
    return {}
}

const add = (form: ICheckTypeTableForm) => {
    const formRef = ref<FormInstance>()
    const active = ref(0)
    const rules = reactive({
        reportName: [
            { required: true, message: '请输入报告名称', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        code: [
            { required: true, message: '请输入报告代码', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        testCircle: [
            { required: true, message: '请输入检测周期', trigger: 'blur' }
        ],
        form: [
            { required: true, message: '请上传委托单', trigger: 'blur' }
        ],
        yssj: [
            { required: true, message: '请上传原始数据单', trigger: 'blur' }
        ],
        checkForm: [
            { required: true, message: '请上传报告单', trigger: 'blur' }
        ]
    })
    const next = async() => {
        switch (active.value) {
        case 0:
            if (!await validate(formRef)) return
            await addCheckType(form)
            active.value = 1
            break
        default:
            break
        }
    }

    return { rules, formRef, next, active }
}


export default defineComponent({
    name: 'UserAdd',
    components: {},
    setup() {
        const form: ICheckTypeTableForm = reactive({
            reportName: '',
            code: '',
            testCircle: '',
            form: '',
            yssj: '',
            checkForm: ''
        })

        const upLoadForm = (file, fileList) => {
            uploadFile(file.raw).then(res => {
                form.form = res.data.data
            })
        }

        const upLoadYssj = (file, fileList) => {
            uploadFile(file.raw).then(res => {
                form.yssj = res.data.data
            })
        }

        const upLoadCheckForm = (file, fileList) => {
            uploadFile(file.raw).then(res => {
                form.checkForm = res.data.data
            })
        }

        return {
            form,
            ...add(form),
            upLoadForm,
            upLoadYssj,
            upLoadCheckForm
        }
    }
})
</script>
